<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head th:include="common/common :: bootcss">
    <title>充值报表</title>
    <script>

        var chargeDetailpage = {
            pageNum : 1,
            pageSize : 10,
            pages : 0,
            total : 0
        };

        function showChargeDetail(userId) {
            chargeDetailpage.pageNum = 1;
            chargeDetailpage.pageSize = 10;
            $("#formUserChargeSearch input[name='startTime']").val("");
            $("#formUserChargeSearch input[name='endTime']").val("");
            $("#formUserChargeSearch input[name='userId']").val(userId);

            getChargeDetail(0);
        }
        
        function getChargeDetail(increment) {

            if (increment < 0 && chargeDetailpage.pageNum == 1) {
                return;
            }
            if (increment > 0 && chargeDetailpage.pageNum >= chargeDetailpage.pages) {
                return;
            }

            chargeDetailpage.pageNum += increment;

            $.post("/admin/charge/chargeDetail", {
                pageNum : chargeDetailpage.pageNum,
                pageSize : chargeDetailpage.pageSize,
                userId : $("#formUserChargeSearch input[name='userId']").val().trim(),
                startTime : $("#formUserChargeSearch input[name='startTime']").val().trim(),
                endTime : $("#formUserChargeSearch input[name='endTime']").val().trim()
            }, function (data) {
                if (!data.success) {
                    console.log(data.errorMsg);
                } else {
                    var html = "";
                    data.data.forEach(function (e) {
                        html += "<tr>";
                        html += "<td>" + e.orderId + "</td>";
                        html += "<td>" + e.chargeDate + "</td>";
                        html += "<td>" + e.payChannelTitle + "</td>";
                        html += "<td>" + e.chargeAmt/100 + "</td>";
                        html += "<td>" + (e.giveAmt != null ? e.giveAmt/100 : 0) + "</td>";
                        html += "</tr>";
                    });
                    $("#chargeDetailModal table tbody").html(html);

                    if (chargeDetailpage.pageNum == 1) {
                        $("#dt-liPrePage").addClass("disabled");
                    } else {
                        $("#dt-liPrePage").removeClass("disabled")
                    }
                    if (chargeDetailpage.pages > 1 && chargeDetailpage.pageNum < chargeDetailpage.pages) {
                        $("#dt-liNextPage").removeClass("disabled");
                    } else {
                        $("#dt-liNextPage").addClass("disabled");
                    }
                }
            });
        }
        
        $(document).ready(function () {

            var page = {
                pageNum : 1,
                pageSize : 10,
                pages : 0,
                total : 0
            };

            $('.form_date').datetimepicker({
                language:  'zh-CN',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            });
            function query(increment) {
                if (increment < 0 && page.pageNum == 1) {
                    return;
                }
                if (increment > 0 && page.pageNum >= page.pages) {
                    return;
                }

                page.pageNum += increment;

                $.post("/admin/charge/total", {
                    startTime : $("#formUserSearch input[name='startTime']").val(),
                    endTime : $("#formUserSearch input[name='endTime']").val()
                }, function(data) {
                    if (!data.success) {
                        console.log(data.errorMsg);
                    } else {
                        var html = "共计用户数：" + data.data.totalUser + "个, 共计充值金额：" + data.data.totalCharge/100 + "元, 共计赠送金额：" + data.data.totalGive/100 + "元";
                        $("#statisticsSpan").html(html);
                    }
                });

                $.post("/admin/charge/list", {
                    startTime : $("#formUserSearch input[name='startTime']").val().trim(),
                    endTime : $("#formUserSearch input[name='endTime']").val().trim(),
                    mobile : $("#formUserSearch input[name='mobile']").val().trim(),
                    pageNum : page.pageNum,
                    pageSize : page.pageSize
                }, function(data) {
                    if (!data.success) {
                        console.log(data.errorMsg);
                    } else {
                        var html = "";
                        page.pages = data.pages;
                        page.total = data.total;
                        data.data.forEach(function (e) {
                            html += "<tr>";
                            html += "<td>" +  e.userId + "</td>";
                            html += "<td>" +  e.mobile + "</td>";
                            html += "<td>" +  e.totalCharge/100  + "</td>";
                            html += "<td>" +  e.totalGive/100 + "</td>";
                            html += "<td><button type='button' class='btn btn-xs' onclick='showChargeDetail(" + e.userId + ")' data-toggle='modal' data-target='#chargeDetailModal'>查看</button></td>";
                            html += "</tr>";
                        })
                        $("#mainTable > tbody").html(html);

                        if (page.pageNum == 1) {
                            $("#liPrePage").addClass("disabled");
                        } else {
                            $("#liPrePage").removeClass("disabled")
                        }
                        if (page.pages > 1 && page.pageNum < page.pages) {
                            $("#liNextPage").removeClass("disabled");
                        } else {
                            $("#liNextPage").addClass("disabled");
                        }
                    }

                });
            }

            $("#btUserSearch").click(function () {
                query(0);
            })
            $("#btNextPage").click(function () {
                query(1);
            });
            $("#btPrePage").click(function () {
                query(-1);
            });

            $("#dt-btNextPage").click(function () {
                getChargeDetail(1);
            });
            $("#dt-btPrePage").click(function () {
                getChargeDetail(-1);
            });
            $("#btUserChargeSearch").click(function () {
                getChargeDetail(0);
            });

            query(0);
        })

    </script>
</head>
<body>
<ol class="breadcrumb">
    <li><a th:href="@{/admin/charge/}">充值报表</a></li>
</ol>
<form id="formUserSearch" class="form-inline" style="padding-bottom: 10px">
    <div class="form-group">
        <label for="mobile">用户账号</label>
        <input type="text" class="form-control" id="mobile" name="mobile" placeholder="用户账号">
    </div>
    <div class="form-group">
        <label>起止时间</label>
        <div class="input-group date form_date" data-link-format="yyyy-mm-dd">
            <input class="form-control" size="16" type="text" readonly name="startTime">
            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
        <div class="input-group date form_date" data-link-format="yyyy-mm-dd">
            <input class="form-control" size="16" type="text" readonly name="endTime">
            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
    </div>
    <button id="btUserSearch" type="button" class="btn btn-default">搜索</button>
</form>
<div style="margin: 10px">
    <span id="statisticsSpan">共计用户数：0个, 共计充值金额：0元, 共计赠送金额：0元</span>
</div>
<table id="mainTable" class="table">
    <thead>
    <tr>
        <th>ID</th>
        <th>用户账号</th>
        <th>充值总金额</th>
        <th>赠送总金额</th>
        <th>详细记录</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<ul class="pager">
    <li class="disabled" id="liPrePage"><a id="btPrePage" href="javascript:void(0);"><</a></li>
    <li id="liNextPage"><a id="btNextPage" href="javascript:void(0);" >></a></li>
</ul>


<div class="modal fade" tabindex="-1" role="dialog" id="chargeDetailModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">充值详情</h4>
            </div>
            <div class="modal-body">
                <form id="formUserChargeSearch" class="form-inline" style="padding-bottom: 10px">
                    <input type="hidden" name="userId">
                    <div class="form-group">
                        <label>起止时间</label>
                        <div class="input-group date form_date" data-link-format="yyyy-mm-dd">
                            <input class="form-control" size="16" type="text" readonly name="startTime">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                        <div class="input-group date form_date" data-link-format="yyyy-mm-dd">
                            <input class="form-control" size="16" type="text" readonly name="endTime">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>
                    <button id="btUserChargeSearch" type="button" class="btn btn-default">搜索</button>
                </form>
                <table class="table">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>充值时间</th>
                        <th>支付类型</th>
                        <th>充值金额</th>
                        <th>赠送金额</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <ul class="pager">
                    <li class="disabled" id="dt-liPrePage"><a id="dt-btPrePage" href="javascript:void(0);"><</a></li>
                    <li id="dt-liNextPage"><a id="dt-btNextPage" href="javascript:void(0);" >></a></li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


</body>
</html>